<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 
        flex布局的特性
        给父级设置了flex属性后 子元素可以自动挤压或者拉伸 span标签不在是行内元素的特性更像块元素,可以设置宽高

        主要看父盒子的宽度是800px,而子盒子有多个n*200.实际的显示效果中,子盒子的宽度远远小于200,flex布局的特性,说明实现了自动挤压
        这里没有设置第一个子盒子的高度，结果是这个子盒子跟父级一样高，说明实现了自动拉伸
    */

    .box {

        /* 设置flex布局 */
        display: flex;

        width: 800px;
        height: 200px;
        border: 1px solid black;
        margin: 100px auto;
    }

    .one {
        width: 200px;
        background-color: pink;
    }
    .two {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    .three {
        width: 200px;
        height: 400px;
        background-color: yellow;
    }

</style>

<body>
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>

        <!-- 
            这里增加了很多子级的盒子，按正常情况下是排不下的，因为父级容器限宽800px 
            但是这里排满了父级的盒子实现了自动挤压
        -->
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
    </div>
</body>

</html>